<!--
 * @Autor: 黄旗
 * @Date: 2020-07-17 09:00:14
-->
<template>
  <Row type="flex" justify="space-between" class="ivu-mb-16">
    <Col v-if="searchData.project">
      <Row :gutter="8" type="flex" align="middle">
        <Col
          v-for="(item, index) in searchData.project"
          :key="index"
          class-name="colname"
        >
          <DatePicker
            :editable="false"
            v-if="item.key === 'DatePicker'"
            :style="item.style"
            :type="item.type"
            v-model="item.value"
            :format="item.format"
            :placement="item.placement"
            :placeholder="item.placeholder || '请选择日期'"
            :options="item.options"
            :split-panels="item.splitPanels"
            :multiple="item.multiple"
            :show-week-numbers="item.showWeekNumbers"
            :start-date="item.startDate"
            :confirm="item.confirm"
            :open="item.open"
            :size="item.size"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :readonly="item.readonly"
            :transfer="item.transfer"
            :element-id="item.elementId"
            :time-picker-options="item.timePickerOptions"
            :separator="item.separator"
            :capture="item.capture"
            @on-change="
              item.onChange
                ? $emit(item.onChange, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
            @on-open-change="
              item.onOpenChange
                ? $emit(item.onOpenChange, $event)
                : $emit(
                    item.callback
                      ? 'on-open-change-' + item.callback
                      : 'on-open-change',
                    $event
                  )
            "
            @on-clear="
              item.onClear
                ? $emit(item.onClear, $event)
                : $emit(
                    item.callback ? 'on-clear-' + item.callback : 'on-clear',
                    $event
                  )
            "
            @on-clickoutside="
              item.onClickoutside
                ? $emit(item.onClickoutside, $event)
                : $emit(
                    item.callback
                      ? 'on-clickoutside-' + item.callback
                      : 'on-clickoutside',
                    $event
                  )
            "
            @on-ok="
              item.onOk
                ? $emit(item.onOk, $event)
                : $emit(
                    item.callback ? 'on-ok-' + item.callback : 'on-ok',
                    $event
                  )
            "
          ></DatePicker>
          <Select
            v-if="item.key === 'Select'"
            v-show="item.show ? item.show.key : true"
            v-model="item.value"
            :style="item.style"
            :placeholder="item.placeholder || '请选择'"
            :multiple="item.multiple"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :filterable="item.filterable"
            :filter-by-label="item.filterByLabel"
            :remote="item.remote"
            :remote-method="item.remoteMethod"
            :loading="item.loading"
            :loading-text="item.loadingText"
            :label="item.label"
            :size="item.size"
            :not-found-text="item.notFoundText"
            :label-in-value="item.labelInValue"
            :placement="item.placement"
            :transfer="item.transfer"
            :element-id="item.elementId"
            :transfer-class-name="item.transferClassName"
            :prefix="item.prefix"
            :max-tag-count="item.maxTagCount"
            :max-tag-placeholder="item.maxTagPlaceholder"
            :allow-create="item.allowCreate"
            :capture="item.capture"
            @on-change="
              item.onChange
                ? $emit(item.onChange, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
            @on-query-change="
              item.onQueryChange
                ? $emit(item.onQueryChange, $event)
                : $emit(
                    item.callback
                      ? 'on-query-change-' + item.callback
                      : 'on-query-change',
                    $event
                  )
            "
            @on-clear="
              item.onClear
                ? $emit(item.onClear, $event)
                : $emit(
                    item.callback ? 'on-clear-' + item.callback : 'on-clear',
                    $event
                  )
            "
            @on-open-change="
              item.onOpenChange
                ? $emit(item.onOpenChange, $event)
                : $emit(
                    item.callback
                      ? 'on-open-change-' + item.callback
                      : 'on-open-change',
                    $event
                  )
            "
            @on-create="
              item.onCreate
                ? $emit(item.onCreate, $event)
                : $emit(
                    item.callback ? 'on-create-' + item.callback : 'on-create',
                    $event
                  )
            "
            @on-select="
              item.onSelect
                ? $emit(item.onSelect, $event)
                : $emit(
                    item.callback ? 'on-select-' + item.callback : 'on-select',
                    $event
                  )
            "
          >
            <OptionGroup
              v-if="item.Group"
              :label="
                item.field && item.field.label ? it[item.field.label] : it.label
              "
              v-for="it in item.childList"
              :key="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
            >
              <Option
                v-for="its in it.children"
                :value="
                  it.field && it.field.values ? its[it.field.values] : its.value
                "
                :key="
                  it.field && it.field.values ? its[it.field.values] : its.value
                "
                >{{
                  it.field && it.field.labels ? its[it.field.labels] : its.label
                }}</Option
              >
            </OptionGroup>
            <Option
              v-if="!item.Group"
              v-for="it in item.childList"
              :value="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              :key="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              >{{
                item.field && item.field.label ? it[item.field.label] : it.label
              }}</Option
            >
          </Select>
          <Select
            v-if="item.key === 'Selects'"
            v-show="item.show ? item.show.key : true"
            v-model="item.value"
            :style="item.style"
            :placeholder="item.placeholder || '请选择'"
            :multiple="item.multiple"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :filterable="item.filterable"
            :filter-by-label="item.filterByLabel"
            :remote="item.remote"
            :remote-method="item.remoteMethod"
            :loading="item.loading"
            :loading-text="item.loadingText"
            :label="item.label"
            :size="item.size"
            :not-found-text="item.notFoundText"
            :label-in-value="item.labelInValue"
            :placement="item.placement"
            :transfer="item.transfer"
            :element-id="item.elementId"
            :transfer-class-name="item.transferClassName"
            :prefix="item.prefix"
            :max-tag-count="item.maxTagCount"
            :max-tag-placeholder="item.maxTagPlaceholder"
            :allow-create="item.allowCreate"
            :capture="item.capture"
            @on-change="
              item.onChange
                ? $emit(item.onChange, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
            @on-query-change="
              item.onQueryChange
                ? $emit(item.onQueryChange, $event)
                : $emit(
                    item.callback
                      ? 'on-query-change-' + item.callback
                      : 'on-query-change',
                    $event
                  )
            "
            @on-clear="
              item.onClear
                ? $emit(item.onClear, $event)
                : $emit(
                    item.callback ? 'on-clear-' + item.callback : 'on-clear',
                    $event
                  )
            "
            @on-open-change="
              item.onOpenChange
                ? $emit(item.onOpenChange, $event)
                : $emit(
                    item.callback
                      ? 'on-open-change-' + item.callback
                      : 'on-open-change',
                    $event
                  )
            "
            @on-create="
              item.onCreate
                ? $emit(item.onCreate, $event)
                : $emit(
                    item.callback ? 'on-create-' + item.callback : 'on-create',
                    $event
                  )
            "
            @on-select="
              item.onSelect
                ? $emit(item.onSelect, $event)
                : $emit(
                    item.callback ? 'on-select-' + item.callback : 'on-select',
                    $event
                  )
            "
          >
            <OptionGroup
              :label="it[item.field.label]"
              v-for="(it, i) in item.childList"
              :key="i"
            >
              <Option
                v-for="its in it.children"
                :value="`${it.wechatid}-${its[item.field.value]}`"
                :key="its[item.field.value]"
                >{{ its[item.field.label] }}</Option
              >
            </OptionGroup>
          </Select>
          <Input
            v-if="item.key === 'Input'"
            v-model="item.value"
            :placeholder="item.placeholder || '请输入'"
            :style="item.style"
            :type="item.type"
            :size="item.size"
            :clearable="item.clearable"
            :disabled="item.disabled"
            :readonly="item.readonly"
            :maxlength="item.maxlength"
            :show-word-limit="item.showWordLimit"
            :password="item.password"
            :icon="item.icon"
            :prefix="item.prefix"
            :suffix="item.suffix"
            :search="item.search"
            :enter-button="item.enterButton"
            :rows="item.rows"
            :autosize="item.autosize"
            :number="item.number"
            :autofocus="item.autofocus"
            :autocomplete="item.autocomplete"
            :element-id="item.elementId"
            :spellcheck="item.spellcheck"
            :wrap="item.wrap"
            @on-change="
              item.onChange
                ? $emit(item.onChange, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
            @on-enter="
              item.onEnter
                ? $emit(item.onEnter, $event)
                : $emit(
                    item.callback ? 'on-enter-' + item.callback : 'on-enter',
                    $event
                  )
            "
            @on-clear="
              item.onClear
                ? $emit(item.onClear, $event)
                : $emit(
                    item.callback ? 'on-clear-' + item.callback : 'on-clear',
                    $event
                  )
            "
            @on-click="
              item.onClick
                ? $emit(item.onClick, $event)
                : $emit(
                    item.callback ? 'on-click-' + item.callback : 'on-click',
                    $event
                  )
            "
            @on-focus="
              item.onFocus
                ? $emit(item.onFocus, $event)
                : $emit(
                    item.callback ? 'on-focus-' + item.callback : 'on-focus',
                    $event
                  )
            "
            @on-blur="
              item.onBlur
                ? $emit(item.onBlur, $event)
                : $emit(
                    item.callback ? 'on-blur-' + item.callback : 'on-blur',
                    $event
                  )
            "
            @on-keyup="
              item.onKeyup
                ? $emit(item.onKeyup, $event)
                : $emit(
                    item.callback ? 'on-keyup-' + item.callback : 'on-keyup',
                    $event
                  )
            "
            @on-keydown="
              item.onKeydown
                ? $emit(item.onKeydown, $event)
                : $emit(
                    item.callback
                      ? 'on-keydown-' + item.callback
                      : 'on-keydown',
                    $event
                  )
            "
            @on-keypress="
              item.onKeypress
                ? $emit(item.onKeypress, $event)
                : $emit(
                    item.callback
                      ? 'on-keypress-' + item.callback
                      : 'on-keypress',
                    $event
                  )
            "
            @on-search="
              item.onSearch
                ? $emit(item.onSearch, $event)
                : $emit(
                    item.callback ? 'on-search-' + item.callback : 'on-search',
                    $event
                  )
            "
          />
          <slot v-if="item.key === 'slot'" :name="item.keys"></slot>
          <Cascader
            v-if="item.key === 'Cascader'"
            :style="item.style"
            :data="item.childList"
            v-model="item.value"
            :render-format="item.format || format"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :placeholder="item.placeholder"
            :trigger="item.trigger || 'hover'"
            :change-on-selec="item.changeOnSelec"
            :size="item.size"
            :load-data="item.loadData"
            :filterable="item.filterable"
            :not-found-text="item.notFoundText"
            :transfer="item.transfer"
            :element-id="item.elementId"
            @on-change="
              item.onCreate
                ? $emit(item.onCreate, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
            @on-visible-change="
              item.onSelect
                ? $emit(item.onSelect, $event)
                : $emit(
                    item.callback
                      ? 'on-visible-change-' + item.callback
                      : 'on-visible-change',
                    $event
                  )
            "
          ></Cascader>
          <TreeSelect
            v-if="item.key === 'TreeSelect'"
            v-model="item.value"
            :data="item.childList"
            :style="item.style"
            :placeholder="item.placeholder || '请选择'"
            :multiple="item.multiple"
            :clearable="item.clearable"
            :show-checkbox="item.showCheckbox"
            :load-data="item.loadData"
            :transfer="item.transfer"
            :max-tag-count="item.maxTagCount"
            @on-change="
              item.onSelect
                ? $emit(item.onSelect, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
            @on-open-change="
              item.onSelect
                ? $emit(item.onSelect, $event)
                : $emit(
                    item.callback
                      ? 'on-open-change-' + item.callback
                      : 'on-open-change',
                    $event
                  )
            "
          />
          <RadioGroup
            v-if="item.key === 'Radio'"
            v-model="item.value"
            :type="item.type"
            :style="item.style"
            :size="item.size"
            :vertical="item.vertical"
            :disabled="item.disabled"
            @on-change="
              item.onChange
                ? $emit(item.onChange, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
          >
            <Radio
              v-if="item.icon"
              :size="item.size"
              :disabled="item.disabled"
              :border="item.border"
              :true-value="item.trueValue"
              :false-value="item.falseValue"
              v-for="it in item.childList"
              :label="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              :key="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
            >
              <Icon :type="it.icon"></Icon>
              <span>{{
                item.field && item.field.label ? it[item.field.label] : it.label
              }}</span>
            </Radio>
            <Radio
              v-if="!item.icon"
              :size="item.size"
              :disabled="item.disabled"
              :border="item.border"
              :true-value="item.trueValue"
              :false-value="item.falseValue"
              v-for="it in item.childList"
              :label="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              :key="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              >{{
                item.field && item.field.label ? it[item.field.label] : it.label
              }}</Radio
            >
          </RadioGroup>
          <Button
            v-if="item.key === 'Button'"
            v-hasC="item.has || ''"
            :type="item.type || 'primary'"
            :ghost="item.ghost"
            :size="item.size"
            :shape="item.shape"
            :long="item.long"
            :html-type="item.htmlType"
            :disabled="disable(item.disabled || '')"
            :loading="item.loading"
            :icon="item.icon"
            :custom-icon="item.customIcon"
            :to="item.to"
            :replace="item.replace"
            :target="item.target"
            :append="item.append"
            @click="
              item.onClick
                ? $emit(item.onClick, $event)
                : $emit(
                    item.callback ? 'click-' + item.callback : 'click',
                    $event
                  )
            "
            >{{ item.label }}</Button
          >
          <CheckboxGroup
            v-if="item.key === 'Checkbox'"
            v-model="item.value"
            :style="item.style"
            :size="item.size"
            :disabled="item.disabled"
            @on-change="
              item.onChange
                ? $emit(item.onChange, $event)
                : $emit(
                    item.callback ? 'on-change-' + item.callback : 'on-change',
                    $event
                  )
            "
          >
            <Checkbox
              v-if="item.icon"
              :label="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              :size="item.size"
              :disabled="item.disabled"
              :border="item.border"
              :indeterminate="item.indeterminate"
              :true-value="item.trueValue"
              :false-value="item.falseValue"
              v-for="it in item.childList"
              :key="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
            >
              <Icon :type="it.icon"></Icon>
              <span>{{
                item.field && item.field.label ? it[item.field.label] : it.label
              }}</span>
            </Checkbox>
            <Checkbox
              v-if="!item.icon"
              :size="item.size"
              :disabled="item.disabled"
              :border="item.border"
              :indeterminate="item.indeterminate"
              :true-value="item.trueValue"
              :false-value="item.falseValue"
              :label="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              v-for="it in item.childList"
              :key="
                item.field && item.field.value ? it[item.field.value] : it.value
              "
              >{{
                item.field && item.field.label ? it[item.field.label] : it.label
              }}</Checkbox
            >
          </CheckboxGroup>
        </Col>
      </Row>
    </Col>
    <Col v-if="searchData.button">
      <Row :gutter="8" type="flex">
        <Col
          v-for="(item, index) in searchData.button"
          :key="index"
          class-name="colname"
        >
          <slot v-if="item.key === 'slot'" :name="item.keys"></slot>
          <Button
            v-else
            v-hasC="item.has || ''"
            :type="item.type || 'primary'"
            :ghost="item.ghost"
            :size="item.size"
            :shape="item.shape"
            :long="item.long"
            :html-type="item.htmlType"
            :disabled="disable(item.disabled || '')"
            :loading="item.loading"
            :icon="item.icon"
            :custom-icon="item.customIcon"
            :to="item.to"
            :replace="item.replace"
            :target="item.target"
            :append="item.append"
            @click="
              item.onClick
                ? $emit(item.onClick, $event)
                : $emit(
                    item.callback ? 'click-' + item.callback : 'click',
                    $event
                  )
            "
            >{{ item.key }}</Button
          >
        </Col>
      </Row>
    </Col>
  </Row>
</template>

<script>
export default {
  props: ["searchData"],
  methods: {
    format(labels, selectedData) {
      const index = labels.length - 1;
      const data = selectedData[index] || false;
      if (data && data.code) {
        return labels[index] + " - " + data.code;
      }
      return labels[index];
    },
    disable(value) {
      if (value) {
        let menus = JSON.parse(localStorage.getItem("menus"));
        let power = menus.action;
        let flag = power.find((ee) => ee === value);
        return !flag;
      }
    },
  },
};
</script>
<style lang="less">
.colname {
  margin-bottom: 8px;
}
.vue-treeselect__control{
    height: 32px;
}
.vue-treeselect__control{
  min-width: 150px;
  width: auto;
}
</style>
